<template>
  <div id="div1" class="centered-div"><h1>欢迎来到李华的演示库</h1>
  </div>
  <div class="div-container">
      <div class="equal-div" data-index="1"><vif/></div>
      <div class="equal-div" data-index="2"><elseif/></div>
      <div class="equal-div" data-index="3"></div>
      <div class="equal-div" data-index="4"></div>
      <div class="equal-div" data-index="5"></div>
      <div class="equal-div" data-index="6"></div>
      <div class="equal-div" data-index="7"></div>
      <div class="equal-div" data-index="8"></div>
      <div class="equal-div" data-index="9"></div>
    </div>
  <!-- <div id="div2"><vif/></div> -->
  
</template>

<script>
import vif from './components/V-fiComponents.vue';
import elseif from './components/Else-ifComponents.vue';

export default {
  name: 'App',
  components: {
    vif,
    elseif
  }
}
</script>

<style>
body{
  display: flex;
    flex-direction: column;
    min-height: 100vh; /* 确保父容器至少占据整个视口高度 */
    margin: 0; /* 去除默认的外边距 */
    padding: 0; /* 去除默认的内边距 */
}
.div-container {
    flex: 1; /* 让div-container占据剩余的所有空间，它会自动根据div1的高度来分配剩余空间 */
    display: flex;
    flex-wrap: wrap; /* 当子div超出一行时自动换行 */
    justify-content: space-around; /* 子div在水平方向上均匀分布，可根据喜好调整分布方式，比如space-between等 */
    align-items: flex-start; /* 子div在垂直方向上顶部对齐，也可调整为其他对齐方式，如center、flex-end等 */
}
.centered-div{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 如果希望在父容器中垂直居中且父容器有明确高度，可以设置此项，否则可根据实际情况调整 */
  margin-bottom: 2%;
}
.equal-div {
  width: calc(33.33% - 10px); /* 大致平均分配宽度，减去10px是为了预留一些间距，可根据实际需求调整 */
  height: calc(33.33% - 10px); /* 大致平均分配宽度，减去10px是为了预留一些间距，可根据实际需求调整 */
  margin-bottom: 10px; /* 设置每个div的下间距，可根据实际需求调整 */
  background-color: rgb(255, 255, 255); /* 可设置背景色以便查看效果，可根据实际需求调整或删除 */
  text-align: center;
  cursor: pointer; /* 设置鼠标悬停时为指针样式，暗示可交互 */
  transition: background-color 0.3s ease; /* 设置背景色变化过渡效果 */
}
.equal-div:hover {
  background-color: rgb(177, 255, 214); /* 鼠标悬停时背景色变化，增强交互感 */
}
</style>
